<template>

      <el-container class="home-container">

        <!-- 头部区域 -->
        <el-header>
            <el-row style="height: 100%">
                <el-col :span="9" style="height: 100%">
                    <img class="header-logo" src="../assets/logo.png" alt="">
                    <span class="header-title">数据库集群管理平台</span>
                </el-col>
                <el-col :span="15" style="height: 100%" class="header-operation">
                    <el-button type="success" round size="mini" icon="el-icon-s-tools" @click="systemCfg">系统设置</el-button>
                    <el-button type="warning" round size="mini" icon="el-icon-s-comment" @click="language">语言</el-button>
                </el-col>
            </el-row>
        </el-header>

        <!-- 页面主体区域 -->
        <el-container>

            <!-- 侧边栏区域 -->
            <!-- 265px / 65px -->
            <el-aside :style="exactAsideWidth">

                <el-menu default-active="0" 
                    @select = 'showPage' 
                    background-color="#FFFFFF" 
                    text-color="#9A9A9A" 
                    active-text-color="#262626" 
                    :collapse="isCollapse" 
                    :collapse-transition="false" 
                    :unique-opened="true">

                    <el-submenu index="0">
                        <template slot="title">
                            <i class="el-icon-s-home"></i>
                            <span>首页</span>
                        </template>
                        <el-menu-item index="/dashboard">
                            <i class="el-icon-s-promotion"></i>
                            <span>仪表盘</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>集群管理</span>
                        </template>
                        <el-menu-item index="/templates">
                            <i class="el-icon-s-operation"></i>
                            <span>通用配置模板</span>
                        </el-menu-item>
                        <el-menu-item index="/cluster">
                            <i class="el-icon-notebook-2"></i>
                            <span>集群信息列表</span>
                        </el-menu-item>
                        <el-menu-item index="/clustermgr">
                            <i class="el-icon-s-management"></i>
                            <span>集群全局管控</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-monitor"></i>
                            <span>监控管理</span>
                        </template>
                        <el-menu-item index="/service">
                            <i class="el-icon-data-line"></i>
                            <span>监控服务列表</span>
                        </el-menu-item>
                        <el-menu-item index="/monitorDashboards">
                            <i class="el-icon-s-data"></i>
                            <span>集群监控</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-message-solid"></i>
                            <span>预警管理</span>
                        </template>
                        <el-menu-item index="/notifications">
                            <i class="el-icon-chat-dot-round"></i>
                            <span>预警消息</span>
                        </el-menu-item>
                        <el-menu-item index="/alert">
                            <i class="el-icon-chat-line-square"></i>
                            <span>预警列表</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-s-comment"></i>
                            <span>事件消息</span>
                        </template>
                        <el-menu-item index="/clusterMsg">
                            <i class="el-icon-cpu"></i>
                            <span>集群事件</span>
                        </el-menu-item>
                        <el-menu-item index="/monitorMsg">
                            <i class="el-icon-link"></i>
                            <span>监控事件</span>
                        </el-menu-item>
                        <el-menu-item index="/alertMsg">
                            <i class="el-icon-message"></i>
                            <span>预警事件</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-s-order"></i>
                            <span>历史&报表</span>
                        </template>
                        <el-menu-item index="/histories">
                            <i class="el-icon-thumb"></i>
                            <span>操作历史</span>
                        </el-menu-item>
                        <el-menu-item index="/reports">
                            <i class="el-icon-data-analysis"></i>
                            <span>数据报表</span>
                        </el-menu-item>
                    </el-submenu>

                </el-menu>

                <!-- <div style="background: lightgreen; width: 100%; height: 100%">
                    <el-scrollbar style="height: 100%">
                        <div style="width: 100%; height:500px; background: red;"></div>
                        <div style="width: 100%; height:500px; background: lightgreen;"></div>
                        <div style="width: 100%; height:500px; background: lightblue;"></div>
                    </el-scrollbar>
                </div> -->

            </el-aside>

            <!-- 内容主体区域 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>

        <!-- 底部区域 -->
        <el-footer>

            <el-switch class="menuSwitch"
                v-model="isCollapse"
                active-text=""
                inactive-text="折叠菜单"
                @change="switchMenu">
            </el-switch>

            <span>
                <i class="el-icon-s-platform"></i>
                当前日期: {{datetime}}
            </span>
            <span>
                <i class="el-icon-s-management"></i>
                任务: {{taskCount}} 个
            </span>
            <span>
                <i class="el-icon-message-solid"></i>
                消息: {{msgCount}} 条
            </span>
            <span>
                <i class="el-icon-info"></i>
                版本号: {{version}}
            </span>

        </el-footer>
    </el-container>

</template>

<script>
// @ is an alias to /src
export default {
  name: 'home-container',
  data: function () {
    return {
        asideWidth: 'width: 265px !important;',
        isCollapse: false,

        datetime: '0000年00月00日 00:00:00 星期一',
        taskCount: 0,
        msgCount: 0,
        version: 'v1.0.0',

        defaultPage: '/dashboard'
    }
  },
  computed: {
      exactAsideWidth: function () {
          return (this.isCollapse ? 'width: 65px' : 'width: 265px') + ' !important;';
      }
  },
  created: function () {
      this.refreshDatetime();
      this.$router.push(this.defaultPage);
  },
  methods: {
      systemCfg: function () {
            console.log("系统设置...");
      },
      language: async function () {
            console.log("设置语言...");
      },
      refreshDatetime: function () {
          var showDay = ['星期日', '星期一','星期二','星期三','星期四','星期五','星期六'];
          setInterval(() => {   
            var dateObj = new Date();   
            var year = dateObj.getFullYear();    //获取当前年份
            var month = dateObj.getMonth() + 1;  //获取当前月份
            var date = dateObj.getDate();        //获取当前日
            var day = dateObj.getDay();          //获取当前星期几
            var hours = dateObj.getHours();      //获取小时
            var minutes = dateObj.getMinutes();  //获取分钟
            var seconds = dateObj.getSeconds();  //获取秒
            
            month = convertToDoubleNum(month);
            date = convertToDoubleNum(date);
            hours = convertToDoubleNum(hours);
            minutes = convertToDoubleNum(minutes);
            seconds = convertToDoubleNum(seconds);
            
            this.datetime = `${year}年${month}月${date}日 ${hours}:${minutes}:${seconds} ${showDay[day]}`;
        }, 1000)

        function convertToDoubleNum (num) {
            num = num < 10 ? '0' + num : num
            return num;
        }
      },
      showPage: function (index, indexPath) {
          this.$router.push(index);
      },
      switchMenu: function (collapse) {
          this.isCollapse = collapse;
      }
  }
}
</script>

<style lang="less" scoped>
    // 主容器样式
    .home-container {
        height: 100%;
    }
    
    // Header 样式
    .el-header {
        background-color: #191B30;
        height: 60px !important;
        padding: 0 12px;
    }
    .header-logo {
        width: 40px;
        height: 40px;
    }
    .header-title {
        color: white;
        font-size: 24px;
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        margin-left: 15px;
    }
    .el-col {
        display: flex;
        align-items: center;
    }
    .header-operation {
        justify-content: flex-end;
    }

    // Aside 样式
    .el-aside {
        border-right: 1px solid #E3E3E3;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .el-menu {
        height: 100%;
        border: 0;
    }


    // Main 样式
    .el-main {
        background-color: white;
    }

    // Footer 样式
    .el-footer {
        border-top: 1px solid #E3E3E3;
        height: 32px !important;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 15px;

        position: relative;
    }
    .el-footer>span {
        font-size: 12px;
        color: gray;
        margin: 0 10px;
    }

    .menuSwitch {
        position: absolute;
        left: 5px;
        top: 5px;
    }

</style>
